<template>
  <div class="goods_mana_type-container">
    <breadcrumb style="position: absolute;width:100%;"></breadcrumb>
    <div class="content">
      <div class="query">
        <div class="margin_right_20">
          活动ID:&nbsp;
          <el-input v-model="userid" placeholder="请输入内容" style="width:100px;height:30px;"></el-input>
        </div>
        <div class="margin_right_20">
          开奖方式:&nbsp;
          <el-select v-model="luckyType">
            <!-- <el-option label="全部" value="0"></el-option> -->
            <el-option label="按时间自动开奖" value="1"></el-option>
            <el-option label="按人数自动开奖" value="2"></el-option>
          </el-select>
        </div>
        <div class="margin_right_20">
          状态:&nbsp;
          <el-select v-model="test" style="width: 100px;">
            <el-option label="全部" value="0"></el-option>
            <el-option label="待开奖" value="1"></el-option>
            <el-option label="已开奖" value="2"></el-option>
          </el-select>
        </div>
        <div class="margin_right_20">
          <!-- 开始时间(开始):&nbsp; -->
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker
              v-model="startTime"
              type="datetime"
              placeholder="开始时间(开始)"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="updateDate"
              style="width:160px;"
            ></el-date-picker>
          </div>
        </div>
        <div class="margin_right_20">
          <!-- 开始时间(结束):&nbsp; -->
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker
              v-model="startEndTime"
              type="datetime"
              placeholder="开始时间(结束)"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="updateDate"
              style="width:160px;"
            ></el-date-picker>
          </div>
        </div>

        <div class="margin_right_20">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker
              v-model="endTime"
              type="datetime"
              placeholder="开奖时间(开始)"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="updateDate"
              style="width:160px;"
            ></el-date-picker>
          </div>
        </div>
        <div class="margin_right_20">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker
              v-model="endingTime"
              type="datetime"
              placeholder="开奖时间(结束)"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="updateDate"
              style="width:160px;"
            ></el-date-picker>
          </div>
        </div>
        <div class="btn">
          <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
          <!-- <el-button type="primary" icon="el-icon-plus" size="medium" @click="$router.push('/freeLotteryPdd')">添加</el-button> -->
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="medium"
            @click="$router.push('/freeLotteryWin')"
          >添加</el-button>

          <el-dialog
            title="活动1详情"
            :visible.sync="dialogVisible1"
            width="70%"
            height="30%"
            @close="editDialogClosed"
          >
            <div class="box">
              <el-row class="row">
                <el-col :span="3">
                  <div class="grid-content bg-purple">抽奖商品</div>
                </el-col>

                <el-col :span="4">
                  <div class="grid-content bg-purple-light">
                    <el-upload
                      class="avatar-uploader"
                      :action="uploadURL"
                      list-type="picture-card"
                      :headers="headers"
                      :on-success="handleSuccess"
                      :on-remove="handleRemove"
                      :on-preview="handlePreview"
                      :before-upload="handleChange5"
                      disabled
                    >
                      <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    {{goodsims}}
                    <!-- @click="select_goods" -->
                    <!-- <el-button type="primary" @click=" select_goods()" disabled>点击选择</el-button> -->
                    <!-- <p>商品名称{{goodsims}}</p> -->
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content bg-purple"></div>
                </el-col>
              </el-row>
              <el-row class="row1">
                <el-col :span="1">
                  <div class="grid-content bg-purple">活动发起方</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <el-input style="width:200px;" v-model="users" disabled></el-input>
                  </div>
                </el-col>
                <el-col :span="1">
                  <div class="grid-content bg-purple">奖品数量</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <el-input style="width:200px;" v-model="max" disabled></el-input>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row1">
                <el-col :span="1">
                  <div class="grid-content bg-purple">活动名称</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <el-input v-model="form.name" style="width:200px;" disabled></el-input>
                  </div>
                </el-col>
                <el-col :span="1">
                  <div class="grid-content bg-purple-light">活动开始时间</div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content bg-purple-light">
                    <div class="inline-block" style="width:150px;">
                      <span class="demonstration"></span>
                      <el-date-picker
                        v-model="form.value4"
                        type="datetime"
                        placeholder="选择日期"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        disabled
                      ></el-date-picker>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row1">
                <el-col :span="1">
                  <div class="grid-content bg-purple-light">开奖方式</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <el-select placeholder v-model="form.luckyType" style="width:200px;" disabled>
                      <!-- <el-option label="按人数开奖" value="2"></el-option>
                      <el-option label="按时间开奖" value="1"></el-option>-->
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="1">
                  <div class="grid-content bg-purple-light">开奖结束时间</div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content bg-purple-light">
                    <div class="block">
                      <span class="demonstration"></span>
                      <el-date-picker
                        v-model="form.value3"
                        type="datetime"
                        placeholder="选择日期时间"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        @change="updateDate"
                        disabled
                      ></el-date-picker>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row1" v-if="this.form.fans==2">
                <el-col :span="1">
                  <div class="grid-content bg-purple">人数设置</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <el-input
                      v-model="form.name4"
                      style="width:100px;"
                      disabled
                      placeholder="请输入参与人数"
                    ></el-input>
                  </div>
                </el-col>
                <!-- <el-col :span="3">
                  <div class="grid-content bg-purple-light"></div>
                </el-col>-->
                <!-- <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <el-input v-model="form.name3" style="width:100px;"></el-input>
                  </div>
                </el-col>-->
              </el-row>
              <el-row class="row1">
                <el-col :span="1">
                  <div class="grid-content bg-purple">是否指定中奖人</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <el-select v-model="form.Appoint" style="width:200px;">
                      <el-option label="不配置" value="1"></el-option>

                      <el-option label="指定中奖用户" value="0"></el-option>
                    </el-select>
                  </div>
                </el-col>
                <!-- <el-col :span="3">
                  <div class="grid-content bg-purple-light">中奖人选择</div>
                </el-col>-->
                <el-col :span="1" v-if="form.Appoint==0?true:false">
                  <div class="grid-content bg-purple">中奖人选择</div>
                </el-col>
                <el-col :span="3" v-if="form.Appoint==0?true:false">
                  <div class="grid-content bg-purple-light">
                    <el-input v-model="form.name3" style="width:100px;" disabled></el-input>
                  </div>
                </el-col>
                <el-col :span="1" v-if="form.Appoint==0?true:false">
                  <div class="grid-content bg-purple">
                    <el-button
                      type="primary"
                      style="width:70px;"
                      disabled
                      @click="$router.push('/goodsusers')"
                    >选择</el-button>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row1" v-if="this.iduser?true:false">
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <!-- <template slot-scope="scope">
                      <span>{{scope.row.form.iduser}}</span>
                    </template>-->
                    <!-- <span style="width:30px;">{{this.form.iduser[0]}}</span> -->
                    <!-- <span style="width:30px;">{{this.form.iduser[1]}}</span>
                    <span style="width:30px;">{{this.form.iduser[2]}}</span>
                    <span>{{this.form.iduser[3]}}</span>-->
                    <span v-for="item in this.iduser" :key="item">
                      <el-button type="text">{{item}}删除</el-button>
                    </span>
                  </div>
                </el-col>
              </el-row>

              <el-row class="row1">
                <el-col :span="1">
                  <div class="grid-content bg-purple">指定性别</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <el-select v-model="form.sex" style="width:200px;" disabled>
                      <el-option label="男" value="1"></el-option>
                      <el-option label="女" value="0"></el-option>
                      <el-option label="不限" value="2"></el-option>
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="1">
                  <div class="grid-content bg-purple">地区限制</div>
                </el-col>
                <el-col :span="1">
                  <div class="grid-content bg-purple-light">
                    <el-select v-model="limits" style="width:100px;" disabled>
                      <el-option label="不限定" value="0"></el-option>
                      <el-option label="限定" value="1"></el-option>
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="8" v-if="limits==0?yxs=false: yxs=true">
                  <div class="grid-content bg-purple-light">
                    <el-select
                      v-model="province2"
                      placeholder="请选择省"
                      @change="handleChange1(1)"
                      style="padding:0; width:100px;"
                      disabled
                    >
                      <el-option
                        v-for="item in provinces1"
                        :key="item.id"
                        :label="item.label"
                        :value="item.label"
                      ></el-option>
                    </el-select>&nbsp;&nbsp;
                    <el-select
                      v-model="city2"
                      placeholder="请选择市"
                      @change="handleChange2(1)"
                      style="width:100px;"
                      disabled
                    >
                      <el-option
                        v-for="item in citys1"
                        :key="item.id"
                        :label="item.label"
                        :value="item.label"
                      ></el-option>
                    </el-select>&nbsp;&nbsp;
                    <el-select v-model="area2" placeholder="请选择区" style=" width:100px;" disabled>
                      <el-option
                        v-for="item in areas1"
                        :key="item.id"
                        :label="item.label"
                        :value="item.label"
                      ></el-option>
                    </el-select>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row1">
                <el-col :span="3">
                  <div class="grid-content bg-purple">备注:</div>
                </el-col>
                <el-col :span="7">
                  <div class="grid-content bg-purple">
                    <el-input
                      type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4}"
                      placeholder="备注"
                      v-model="form.textarea2"
                      style="width:500px;"
                      disabled
                    ></el-input>
                  </div>
                </el-col>
              </el-row>
            </div>

            <div slot="footer" class="dialog-footer">
              <div class="btn">
                <el-button @click="dialogVisible1=false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible1=false ,luckDraw()">确 定</el-button>
              </div>
            </div>
          </el-dialog>
          <!-- 抽奖活动设置修改 -->

          <!-- 抽奖活动详情 -->
        </div>
      </div>
      <el-scrollbar style="height:100%;">
        <div class="table">
          <el-table :data="getUserfer" style="width: 100%" height="598" border stripe>
            <el-table-column prop="id" label="活动ID"></el-table-column>
            <el-table-column prop="goodsName" label="奖品名称"></el-table-column>
            <!-- <el-table-column prop="goodPrictureUrl" label="奖品图片">
              <template slot-scope="scope">
                <img :src="scope.row.goodPrictureUrl" alt width="40" height="40" />
              </template>
            </el-table-column>-->
            <el-table-column prop="number" label="奖品数量"></el-table-column>
            <el-table-column prop="luckyType" label="开奖方式">
              <template slot-scope="scope">{{scope.row.luckyType==1?'按时间开奖':'按人数开奖'}}</template>
            </el-table-column>
            <el-table-column prop width="200px" label="开奖条件">
              <template slot-scope="scope">
                {{!scope.row.maxPeople?scope.row.endTime:scope.row.maxPeople}}
                <!-- {{scope.row.maxPeople==''?scope.row.endTime:scope.row.maxPeople}} -->
              </template>
            </el-table-column>
            <el-table-column prop="joinNum" label="当前参与人数"></el-table-column>
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">{{scope.row.status==1?'待开奖':'已开奖'}}</template>
            </el-table-column>
            <el-table-column prop="startTime" width="200px" label="开始时间"></el-table-column>
            <el-table-column prop="endTime" width="200px" label="开奖时间"></el-table-column>
            <!-- <el-table-column prop label="活动状态"></el-table-column> -->
            <!-- <el-table-column prop="joinNum" label="参与人数" @click="handleGoods(scope.row)">
              <template slot-scope="scope">
                <el-button @click="handleGoods(scope.row)">{{scope.row.pate}}</el-button>
              </template>
            </el-table-column>-->
            <!-- <el-table-column prop="username" label="获奖用户昵称"></el-table-column>
            <el-table-column prop label="获奖用户"></el-table-column>-->
            <!-- <el-table-column prop="createTime" label="创建时间"></el-table-column> -->
            <!-- <el-table-column label="备注"></el-table-column> -->
            <el-table-column label="操作" style="width:250px;">
              <template slot-scope="scope">
                <!-- <el-button
                  type="text"
                  size="small"
                 
                  @click="deteil(scope.row)"
                >删除</el-button>-->
                <!--  icon="el-icon-delete" -->
                <!-- <el-button type="text" size="small" v-if="scope.row.status == '禁用' ? true:false">使用</el-button> -->
                <el-button
                  type="text"
                  size="small"
                  @click="getPut(scope.row)"
                  v-if="scope.row.status==2?false:true"
                >修改</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="dialogVisible1=true, getUser(scope.row)"
                >详情</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="list(scope.row.id),$router.push('/freeLotteryPrize?id='+scope.row.id)"
                >中奖</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页功能 -->
          <pagination
            :currentPage="currentPage"
            :page="page"
            :total="total"
            :pageSize="pageSize"
            @change-current="currentChange"
            @change-size="sizeChange"
          ></pagination>
        </div>
      </el-scrollbar>
      <!-- 添加信息的对话框 -->
      <el-dialog title="商品类型修改" :visible.sync="dialogVisible" width="50%">
        <el-form :model="form">
          <el-form-item label="商品类型名称：" label-width="100px">
            <el-input v-model="form.name" @keyup.enter.native="getList()"></el-input>
          </el-form-item>
          <el-form-item label="商品类型状态：">
            <el-select v-model="form.status" placeholder>
              <el-option label="禁用" value="0"></el-option>
              <el-option label="使用" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <div class="btn">
            <el-button @click="dialogVisible=false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible=false">确 定</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import breadcrumb from "../../components/breadcrumb";
import pagination from "../../components/page";
import { mapActions } from "vuex";
import { miFi, tFreeO_add } from "../../api/getData";
export default {
  components: { breadcrumb, pagination },
  data() {
    return {
      userid: "", //商品id
      luckyType: "", //开奖的状态
      startTime: "", //开始时间（开始）
      startEndTime: "", //开始时间(结束)
      endTime: "", //开奖时间(开始)
      endingTime: "", //开奖时间(结束)
      test: "", //活动状态
      iduser: "",
      users: "", //活动发起方
      max: "", //奖品数量
      status3: "", //开奖方式选择
      goodsims: "",
      //商品的标题
      goodsId: this.$route.query.id || "",
      //商品的id
      getUserfer: [],
      page: 1,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      goods: {},
      luckySetVo: {},
      yxs: false,
      limits: "",
      //上传图片的URL地址
      uploadURL: this.upload_(),
      //图片上传组件的headers请求头对象
      headers: {
        // "Content-Type": "multipart/form-data",
        // "Content-Type": "application/x-www-form-urlencoded",
        // Authorization: window.localStorage.getItem("token")
      },

      //抽奖活动详情
      imageUrl3: "",
      imageUrl4: "",
      id: "",
      imageUrl2: "",
      isFlag: true,
      active: [],
      bicPig: "",
      imageUrl1: "",
      smallFile: "",
      bigFile: "",
      id: this.$route.query.id,
      dialogVisible: false,
      goodsMsg: "", // 商品属性
      // 省
      provinces1: [],
      citys1: [],
      areas1: [],
      // 市
      provinces2: [],
      citys2: [],
      areas2: [],
      // 区
      province1: "",
      province2: "",
      city1: "",
      city2: "",
      area1: "",
      area2: "",
      id: "",
      options1: [
        {
          value1: "",
          label: "所有"
        },
        {
          value1: "0",
          label: "禁用"
        },
        {
          value1: "1",
          label: "使用"
        }
      ],
      value: "",
      value1: "",

      //控制添加信息对话框的显示与隐藏
      dialogVisible: false,
      dialogVisible1: false,
      //控制抽奖活动修改对话框的显示和隐藏
      dialogVisible2: false,
      //控制抽奖活动详情对话框的显示和隐藏
      dialogVisible3: false,
      form: {
        name: "",
        status: "",
        name1: "",
        name2: "",
        name3: "",
        name4: "",
        sex: "",
        value3: "",
        value4: "",
        textarea2: "",
        Appoint: "", //指定中奖人?
        luckyType: "",
        fans: ""
      },
      //格式化日期时间
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      }
    };
  },
  created() {
    // this.getuserList();
    this.handleChange();
    let formData = JSON.parse(localStorage.getItem("formData")) || {};
    this.goodsId = localStorage.getItem("id") || "";
    localStorage.removeItem("id");
    if (this.goodsId) {
      this.dialogVisible1 = true;
      this.get_goodsDeatil();
    }
    // this.InUser()
    // this.luckDraw();
    this.getList();
  },
  methods: {
    ...mapActions(["save_address"]),
    updateDate: function(val) {
      //console.log("val:" + val);
      this.value1 = val;
      //console.log("this.value1:" + this.value1);
    },
    getuserList() {
      // this.goodsTypeList;
      // this.total = 11;
      // //console.log(11);
      ////console.log(this.value3);
    },
    //监听pagesize改变的函数事件
    sizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getList();
    },
    //监听页码值改变的事件
    currentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    //请求省市地区
    handleChange(father = -1, level = 1) {
      // let data="father="+father+'&level='+level
      this.$axios
        .post("web_dict_address/get", "father=" + father + "&level=" + level)
        .then(result => {
          if (result.data.status == 0) {
            result.data.data.forEach(item => {
              this.provinces1.push({
                label: item.name,
                id: item.id
              });
              this.provinces2.push({
                label: item.name,
                id: item.id
              });
            });
          }
        });
    },
    get_city_area(type) {
      let id = "";
      let city = "";
      if (type == 1) {
        let province = this.province1;
        city = this.city1;
        this.provinces1.forEach(item => {
          if (item.label == province) {
            id = item.id;
          }
        });
      } else {
        let province = this.province2;
        city = this.city2;

        this.provinces2.forEach(item => {
          if (item.label == province) {
            id = item.id;
          }
        });
      }

      this.$axios
        .post("web_dict_address/get", "father=" + id + "&level=" + 2)
        .then(result => {
          if (result.data.status == 0) {
            result.data.data.forEach(item1 => {
              if (type == 2) {
                this.citys1.push({ label: item1.name, id: item1.id });
              } else {
                this.citys2.push({ label: item1.name, id: item1.id });
              }
              if (item1.name == city) {
                let id = item1.id;
                this.$axios
                  .post("web_dict_address/get", "father=" + id + "&level=" + 3)
                  .then(result => {
                    if (result.data.status == 0) {
                      result.data.data.forEach(item2 => {
                        if (type == 2) {
                          this.areas1.push({
                            label: item2.name,
                            id: item2.id
                          });
                        } else {
                          this.areas2.push({
                            label: item2.name,
                            id: item2.id
                          });
                        }
                      });
                    }
                  });
              }
            });
          }
        });
    },
    handleChange1(type) {
      // type 用来判断是收货信息中的地址， 还是售后中的地址'
      let id = "";
      if (type == 1) {
        this.city2 = "";
        this.area2 = "";
        this.citys1 = [];
        this.areas1 = [];

        this.provinces1.forEach(item => {
          if (item.label == this.province2) {
            id = item.id;
          }
        });
      } else {
        this.city1 = "";
        this.area1 = "";
        this.citys2 = [];
        this.areas2 = [];
        this.provinces2.forEach(item => {
          if (item.label == this.province1) {
            id = item.id;
          }
        });
      }

      this.$axios
        .post("web_dict_address/get", "father=" + id + "&level=" + 2)
        .then(result => {
          if (result.data.status == 0) {
            result.data.data.forEach(item => {
              if (type == 1) {
                this.citys1.push({ label: item.name, id: item.id });
              } else {
                this.citys2.push({ label: item.name, id: item.id });
              }
            });
          }
        });
    },
    //请求市区
    handleChange2(type) {
      let id = "";
      if (type == 1) {
        this.areas1 = [];
        this.area2 = "";
        this.citys1.forEach(item => {
          if (item.label == this.city2) {
            id = item.id;
          }
        });
      } else {
        this.areas2 = [];
        this.area1 = "";
        this.citys2.forEach(item => {
          if (item.label == this.city1) {
            id = item.id;
          }
        });
      }
      this.$axios
        .post("web_dict_address/get", "father=" + id + "&level=" + 3)
        .then(result => {
          if (result.data.status == 0) {
            result.data.data.forEach(item => {
              if (type == 1) {
                this.areas1.push({ label: item.name, id: item.id });
              } else {
                this.areas2.push({ label: item.name, id: item.id });
              }
            });
          }
        });
    },

    //处理图片预览效果
    handlePreview() {},
    //处理移除图片的操作
    handleRemove(file) {
      //console.log(file);
      // this.imageUrl1 = "";
    },
    //监听图片上传成功的事件
    handleSuccess(response, file, fileList) {
      //console.log(response, "1");
      //这个是奖品图片地址
      // //console.log(file.url);
      // //console.log(fileList,'fileList')
      this.imageUrl2 = response;
    },
    //监听图片上传成功的事件
    handleSuccess1(response, file, fileList) {
      //这个是banner图片地址
      //console.log(response, "21");
      this.imageUrl1 = response;
    },
    handleChange5(file) {
      // //console.log(file,'成功？')
    },
    handleChange4(file) {
      //奖品详情图
    },
    handleRemove1(file) {
      //奖品详情图
    },
    handlePreview1() {
      //奖品详情图
    },
    handleGoods(row) {
      //console.log(row.goodsNameType);
      this.$router.push({
        path: "/freeLotteryIn",
        query: {
          row
        }
      });
    },
    //添加抽奖活动设置
    luckDraw() {
      // this.$refs.addFormRef.validate(valid=>{
      //   if(!valid){
      //     return this.$message.error('请填写必要的表单项')
      //   }
      // })

      var obj = {
        goods: {
          bannerUrl: this.imageUrl1,
          pricture: this.imageUrl2,
          name: this.form.name,
          goodsId: this.goodsId
        },
        luckySet: {
          maxPeopleNum: this.form.name4,
          minPeopleNum: this.form.name3,
          province: this.province2,
          region: this.city2,
          town: this.area2,
          startTime: this.form.value4,
          type: this.form.status,
          note: this.form.textarea2,
          // // luckySetVo:luckySetVo,
          // endTime: JSON.stringify(this.form.value3),
          endTime: this.form.value3,

          gender: this.form.sex,
          limits: this.limits
        }
      };
      //添加抽奖活动的请求
      //console.log(obj);
      this.$axios
        .post("/web_free_lucky/add_set", obj)
        .then(res => {
          //console.log(res, "后台返回的数据");
          // this.form=''
          //console.log(res.data.status);
          if (res.data.status !== 200) {
            if (res.data.status == 0) {
              this.getList();
              this.$router.push("/freeLotteryAdd");
              return this.$message({
                type: "success",
                message: "操作成功"
              });
            } else {
              //console.log("报错了");
              return this.$message({
                type: "warning",
                message: "添加数据失败"
              });
            }
          }
        })
        .catch(err => {
          //console.log(err);
        });
    },
    btns1() {},
    //获取抽奖信息分页列表
    getList(currentPage) {
      if (currentPage) {
        this.currentPage = currentPage;
      }
      let data = {
        size: this.pageSize,
        current: 2
      };
      //console.log(data, "分页的数据");
      let data1 =
        "id=" +
        this.userid +
        "&luckyType=" +
        this.luckyType +
        "&status=" +
        this.test +
        "&startTime=" +
        this.startTime +
        "&startEndTime=" +
        this.startEndTime +
        "&endTime=" +
        this.endTime +
        "&endingTime=" +
        this.endingTime +
        "&size=" +
        this.pageSize +
        "&current=" +
        this.currentPage;
      this.$axios
        .post("/web_free_lucky/page?" + data1)
        .then(res => {
          //console.log(res, "抽奖的信息列表");
          //console.log(res.data.data.records);
          // this.queryInfo.pagesize = res.data.data.size;
          this.total = res.data.data.total;
          this.page = Math.ceil(this.total / this.pageSize);
          this.getUserfer = res.data.data.records;
        })
        .catch(err => {
          //console.log(err);
        });
    },
    //删除抽奖接口
    deteil(row) {
      //console.log(row.id);
      var freeLuckySetId = row.id;
      //this.$axios.post('/web_free_lucky/delete_set',)http://192.168.0.164:8880
      fetch(this.net_() + "/web_free_lucky/delete_set/" + freeLuckySetId, {
        method: "delete",
        headers: {
          Accept: "application/json;text/plain, */*",
          "Content-Type": "application/json",
          Authorization: localStorage.getItem("token")
        }
      })
        .then(response => response.json())
        .then(data => {
          //console.log(data);
          if (data.status == 0) {
            this.getList();
            this.$message.success("删除成功");
          }
        });
    },
    //获取单个抽奖信息详情
    getUser(row) {
      //console.log(row);
      //this.getUser(row)
      var freeLuckySetId = row.id;
      fetch(this.net_() + "/web_free_lucky/set/" + freeLuckySetId, {
        method: "get",
        headers: {
          Accept: "application/json;text/plain,*/*",
          "Content-Type": "application/json",
          Authorization: localStorage.getItem("token")
        }
      })
        .then(response => response.json())
        .then(data => {
          this.$message.success("获取成功");
          //console.log(data.data, "单个抽奖详情");
          this.goodsims = data.data.goods.name;

          this.imageUrl1 = data.data.goods.bannerUrl;
          this.form.status = JSON.stringify(data.data.luckySet.status);
          this.limits = JSON.stringify(data.data.luckySet.limits);
          // this.form2.name3 = data.data.luckySet.maxPeopleNum;
          this.form.name4 = data.data.luckySet.maxPeopleNum;
          this.form.sex = JSON.stringify(data.data.luckySet.gender);
          this.form.textarea2 = data.data.luckySet.note;
          this.form.value4 = JSON.stringify(data.data.luckySet.startTime);
          this.form.value3 = JSON.stringify(data.data.luckySet.endTime);
          this.max = data.data.goods.number;
          this.users = data.data.luckySet.startName;
          //console.log(data.data.luckySet.winId, "中奖用户");
          this.form.fans = data.data.luckySet.type;
          if (this.form.fans == 1) {
            this.form.luckyType = "按时间开奖";
          } else {
            this.form.luckyType = "按人数开奖";
          }
          if (data.data.luckySet.winId) {
            // //console.log(data.data.luckySet.winId,'中奖用户')
            this.iduser = data.data.luckySet.winId.split(",");
            //console.log(this.iduser, "指定中奖人");
          }
          let goodsid = data.data.goods.goodsId;
          this.getgoods(goodsid);
        });
    },
    getgoods(goodsid) {
      this.$axios.post("/web_goods/get_one", "id=" + goodsid).then(res => {
        //console.log(res);
        this.imageUrl1 = res.data.data.goods.pictureUrl;
        this.form.name = res.data.data.goods.name;
      });
    },
    //修改抽奖信息
    getPut(row) {
      let data = "ids=" + row.id + "&goodsims=" + this.goodsims;
      //console.log(this.goodsims);
      this.$router.push("/freeLotteryDetail?" + data);
    },
    //提交修改抽奖信息
    //处理限定地区
    selectChange() {
      this.yxs = !this.yxs;
    },
    //关闭弹出框时清空表单
    editDialogClosed() {
      // this.$refs.formRef.resetFields()
    },
    select_goods() {
      this.$router.push("/selectGoods");
    },
    async get_goodsDeatil() {
      const { data: res } = await this.$axios.post(
        "/web_goods/get_one",
        "id=" + this.goodsId
      );
      //console.log(res.data, "选取的id");
      //console.log(res.data.goods.name);
      this.goodsims = res.data.goods.name;
      this.imageUrl1 = res.data.goods.pictureUrl;
    },
    async list(id) {
      const { data: res } = await this.$axios.post(
        "/web_free_lucky/drawn",
        "luckySetId=" + id
      );
      //console.log(res);
    }
  }
};
</script>
<style lang="less"  >
// scoped
.goods_mana_type-container {
  @import "../../style/table.less";
  @import "../../style/content.less";
  display: flex;
  flex-flow: column;
  position: relative;
  height: 100%;
  .el-table .cell {
    white-space: pre-line !important;
  }

  .content {
    .query {
      .btn {
        .el-button {
          width: 70px;
        }
      }
    }

    .el-form {
      width: 80%;
      display: flex;
      // flex-direction: column;
      // justify-content: space-around;
      // flex-wrap: wrap;
      // align-items: baseline;
      .el-form-item {
        margin: 10px;
        flex: 2;
        span {
          display: inline-block;
        }
      }
    }
  }
  .el-pagination {
    text-align: center;
    margin-top: 15px;
  }
}
// .query_big_pic{
//     // display: flex;
//     // // flex-direction:row ;
//     // //       flex-wrap:wrap;
//     // //       justify-content:space-around;
//     //       flex: 1;
//     // text-align: left;
// }
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
  border: 1px solid #ccc;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
.lunbo_pic {
  width: 150px;
  height: 120px;
  .el-icon-plus.avatar-uploader-icon {
    width: 150px;
    height: 120px;
    line-height: 120px;
  }
  img {
    width: 150px;
    height: 120px;
  }
}
.box {
  // background-color: #eee;
  margin: 15px 0;
}
.box > .row {
  font-size: 22px;
  font-weight: 400;
}
.box > .row1 {
  margin: 20px 0;
  font-size: 14px;
  font-weight: 400;
}
.box > .row1 .el-input__inner {
  // width: 40px;
  height: 30px;
}
.box > .row span {
  display: inline-block;
  // color: red;
}
.el-row {
  // margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  // margin: 0 10px;
  min-width: 110px;
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  line-height: 36px;
  min-width: 40px;
}
.row-bg {
  // padding: 10px 0;
  background-color: #f9fafc;
}
</style>